<template>
	<view class="playPage">
		<view class="options">
			<view class="row">
				<view class="left">
					奖项选择：
				</view>
				<view class="right">
					<uni-data-select v-model="formData.aid" :localdata="awardsArray" @change="changeAwards"></uni-data-select>
				</view>
			</view>
			<view class="row">
				<view class="left">
					抽奖个数：
				</view>
				<view class="right">
					<uv-number-box :value="formData.number" :min="0"></uv-number-box>
				</view>
			</view>
		</view>
		<view class="btnGroup">
			<view class="btn" hover-class="btnHover" hover-stay-time="0">
				<text v-if="true" class="noStart">点击\n抽奖</text>
				<text v-if="false" class="start">停止</text>
				<text v-if="false" class="end">已结束</text>
			</view>
		</view>
		<view class="logs">
			<view class="title">
				—— 开奖记录 ——
			</view>
			<view class="content">
				<uni-list>
					<uni-list-item :to="`./list`" v-for="(item,index) in 5" :key="item" clickable showArrow
						:title="`第${index+1}轮抽奖`" note="二等奖 - 12人" rightText="右侧文字内容"></uni-list-item>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const formData = ref({
		aid: 0,
		number: 0
	})
	const awardsArray = ref([{
			value: 0,
			text: "一等奖"
		},
		{
			value: 1,
			text: "二等奖"
		},
		{
			value: 2,
			text: "三等奖"
		}
	]);
	const changeAwards = (value) => {
		formData.value.aid = value;
		formData.value.number = 0;
	}
</script>

<style lang="scss" scoped>
	.playPage {
		.options {
			padding: 20rpx;
			border-bottom: 14rpx solid #f4f4f4;
			padding-bottom: 0;

			.row {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				border-bottom: 1px solid #f4f4f4;
				height: 100rpx;
				padding: 10rpx 20rpx;

				.right {
					flex: 1;
				}
			}
		}

		.btnGroup {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 100rpx 0;

			.btn {
				width: 260rpx;
				height: 260rpx;
				font-size: 46rpx;
				color: #fff;
				font-weight: bolder;

				text {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					position: relative;
				}

				.noStart {
					background: #ff6a33;
				}

				.start {
					background: #ee6426;

					&::before {
						content: "";
						display: block;
						width: 110%;
						height: 110%;
						border: 1px solid transparent;
						border-top-color: #ee6426;
						box-sizing: border-box;
						position: absolute;
						top: -5%;
						left: -5%;
						border-radius: 50%;
						animation: rotate 1s infinite linear;
					}

					&::after {
						content: "";
						display: block;
						width: 120%;
						height: 120%;
						border: 1px solid transparent;
						border-left-color: #ee6426;
						box-sizing: border-box;
						position: absolute;
						top: -10%;
						left: -10%;
						border-radius: 50%;
						animation: rotate 0.7s infinite linear;
					}
				}

				.end {
					background: #888;
				}
			}

			.btnHover {
				transform: scale(0.97);
			}
		}

		.logs {
			padding: 100rpx 30rpx;

			.title {
				text-align: center;
				font-size: 36rpx;
				color: #999;
				font-weight: bolder;
			}

			.content {
				padding: 50rpx 0;
			}
		}
	}

	@keyframes rotate {
		0% {
			transform: rotate(0);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>